<template>
  <div style="width: 600px; height: 600px" ref="myDiv" id="myDiv"></div>
</template>

<script>
import * as echarts from "../../assets/echarts.min.js";
import axios from "axios";
import { reactive, ref, onMounted } from "vue";

export default {
  name: "HelloWorld",
  setup() {
    // 生命周期函数，项目启动时会自动运行
    onMounted(() => {
      datainit(); // 调用初始化的方法
    });

    // 初始化的方法
    const datainit = () => {
      // // 请求后端接口
      // axios({
      //   method:'get',
      //   url:'/api/data/list'
      // }).then(res=>{
      //   console.log(res.data.data);
      //    // 图表的初始化，放在数据获取成功后
      //    init();
      // })

      var bool = false;
      var zhi = 0;
      var dataAll = [];
      var cj = [];
      var names = [];
      var start = [];
      var dy = [];
      var url = "/api/data/list5";

      // 请求后端接口
      axios.get(url).then((res) => {
        var data = res.data.data.data;

        for (let i in data) {
          for (let j in dataAll) {
            if (data[i].name == dataAll[j].name) {
              bool = true;
              zhi = j;
              break;
            } else {
              bool = false;
            }
          }
          // var time = (new Date(data[i].endtime).getTime() - new Date(data[i].starttime).getTime()) /1000
          if (bool) {
            dataAll[zhi].time += data[i].number;
          } else {
            dataAll.push({
              name: data[i].name,
              time: data[i].number,
              chejian: data[i].chejian,
              count: 0,
            });
          }
        }

        bool = false;

        for (let i in data) {
          for (let j in cj) {
            if (data[i].chejian == cj[j].chejian) {
              bool = true;
              zhi = j;
              break;
            } else {
              bool = false;
            }
          }
          if (bool) {
            cj[zhi].number += data[i].number;
          } else {
            cj.push({ chejian: data[i].chejian, number: data[i].number });
          }
        }

        for (let i in cj) {
          dy.push(cj[i].chejian);
        }

        for (let i in dataAll) {
          dataAll[i].count = cj[dy.indexOf(dataAll[i].chejian)].number;
        }
        var dy2 = [];
        var dy3 = [];
        for (let i in dataAll) {
          names.push(dataAll[i].name);
          start.push(dataAll[i].time);
          dy2.push(dataAll[i].count);
          dy3.push(dataAll[i].chejian);
        }

        console.log(names, start, dy2, dy3);

        // 图表的初始化，放在数据获取成功后
        init(names, start, dy2, dy3);
      });
    };

    // 初始化图表
    const init = (names, start, dy2, dy3) => {
      var options = {
        title: {
          text: "折柱混合图展示设备日均产量和所在车间日均产量",
        },
        xAxis: [
          {
            data: names,
            name: "设备",
          },
          {
            data: dy3,
            name: "车间",
          },
        ],
        yAxis: {
          name: "产量",
        },
        series: [
          {
            data: start,
            type: "bar",
          },
          {
            data: dy2,
            type: "line",
          },
        ],
      };

      let myChart = echarts.init(document.getElementById("myDiv"));
      // var myChart = echarts.init(myDiv.value)
      myChart.setOption(options);
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
